<!--
@ 作者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
-->
<template>
    <div class="down_canvas">
        <!---------------------------|导航树 -->
        <div class="down_canvas_left">
            <NAnchor style="z-index: 1">
                <NAnchorLink title="画布" href="#CanvasAttrsCanvas" style="margin-top: 5px" />
                <NAnchorLink title="格栅" href="#CanvasAttrsGrid" />
                <NAnchorLink title="光标" href="#CanvasAttrsCursor" />
                <NAnchorLink title="捕捉" href="#CanvasAttrsCatch" />
            </NAnchor>
        </div>
        <!---------------------------|工具按钮 -->
        <div class="container_tool">
            <div style="width: 5px"></div>
            <div class="h_flex_column_around">
                <!-- 新建页面 -->
                <NTooltip placement="bottom" trigger="hover">
                    <template #trigger>
                        <svg class="h_svg_icon" xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" :width="IconSize" :height="IconSize"
                            viewBox="0 0 1024 1024" v-html="myStore.getDataManagerIcon('dataNewIcon')"
                            @click="myStore.createNewPage()"></svg>
                    </template>
                    <span>新建页面</span>
                </NTooltip>
                <!-- 复制参数 -->
                <NTooltip placement="bottom" trigger="hover">
                    <template #trigger>
                        <svg class="h_svg_icon" xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" :width="IconSize" :height="IconSize"
                            viewBox="0 0 1024 1024" v-html="myStore.getDataManagerIcon('dataCopyIcon')"
                            @click="myStore.copyPageCanvasInfo()"></svg>
                    </template>
                    <span>复制画布参数</span>
                </NTooltip>
                <!-- 粘贴参数 -->
                <NTooltip placement="bottom" trigger="hover">
                    <template #trigger>
                        <svg class="h_svg_icon" xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" :width="IconSize" :height="IconSize"
                            viewBox="0 0 1024 1024" v-html="myStore.getDataManagerIcon('pasteIcon')"
                            @click="myStore.pastePageCanvasInfo()"></svg>
                    </template>
                    <span>粘贴画布参数</span>
                </NTooltip>
            </div>
            <div style="width: 20px"></div>
        </div>
        <!---------------------------|属性 -->
        <div class="down_canvas_middle">
            <!---------------------------|画布 -->
            <div id="CanvasAttrsCanvas" class="anchor_link">
                <!-- 画布缩放 -->
                <div class="h_info">
                    <text class="h_info_lable">画布缩放:</text>
                    <div class="h_flex_column h_info_val">
                        <NSlider class="h_margin_top_10" :step="0.01" :min="0.01" :max="100"
                            v-model:value="myStore.canvasAttr.canvasScale" />
                        <NInputNumber class="h_margin_top_10" :step="0.01" :min="0.01" :max="100"
                            v-model:value="myStore.canvasAttr.canvasScale" />
                    </div>
                </div>
                <!-- 画布背景色 -->
                <div class="h_info">
                    <text class="h_info_lable">画布背景色:</text>
                    <NColorPicker class="h_info_val" v-model:value="myStore.canvasAttr.canvasBackColor"
                        :actions="['confirm']" :modes="['rgb']" :swatches="colorOpt" :show-alpha="true" />
                </div>
            </div>

            <!---------------------------|格栅 -->
            <n-divider />

            <div id="CanvasAttrsGrid" class="anchor_link">
                <!-- 格栅[0]格栅模式 gridModel -->
                <div class="h_info">
                    <text class="h_info_lable">格栅模式:</text>
                    <NSelect class="h_info_val" v-model:value="myStore.canvasAttr.gridModel" :options="gridModelOpt" />
                </div>

                <div v-if="gridModel === 2 /*点格栅*/">
                    <!-- 格栅间距 GridBisectionCont -->
                    <div class="h_info">
                        <text class="h_info_lable">格栅间距:</text>
                        <div class="h_flex_column h_info_val">
                            <NSlider class="h_margin_top_10" :step="1" v-model:value="myStore.canvasAttr.gridSpace" />
                            <NInputNumber class="h_margin_top_10" :step="1" v-model:value="myStore.canvasAttr.gridSpace" />
                        </div>
                    </div>
                    <!-- 格栅点颜色 gridDotColor-->
                    <div class="h_info">
                        <text class="h_info_lable">格栅点颜色:</text>
                        <NColorPicker class="h_info_val" v-model:value="myStore.canvasAttr.gridDotColor"
                            :actions="['confirm']" :modes="['rgb']" :swatches="colorOpt" :show-alpha="true" />
                    </div>
                </div>

                <div v-if="gridModel === 3 /*方格*/">
                    <!-- 格栅样式 gridStyle -->
                    <div class="h_info">
                        <text class="h_info_lable">格栅样式:</text>
                        <NSelect class="h_info_val" v-model:value="myStore.canvasAttr.gridStyle" :options="gridStyleOpt" />
                    </div>
                    <!-- 格栅样式选项:1-像素尺寸 -->
                    <div v-if="gridStyle === 1 /*像素尺寸*/">
                        <!-- 格栅间距 GridBisectionCont -->
                        <div class="h_info">
                            <text class="h_info_lable">格栅间距:</text>
                            <div class="h_flex_column h_info_val">
                                <NSlider class="h_margin_top_10" :step="1" v-model:value="myStore.canvasAttr.gridSpace" />
                                <NInputNumber class="h_margin_top_10" :step="1"
                                    v-model:value="myStore.canvasAttr.gridSpace" />
                            </div>
                        </div>
                        <!-- 小格颜色 gridColorMini -->
                        <div class="h_info">
                            <text class="h_info_lable">小格颜色:</text>
                            <NColorPicker class="h_info_val" v-model:value="myStore.canvasAttr.gridColorMini"
                                :actions="['confirm']" :modes="['rgb']" :swatches="colorOpt" :show-alpha="true" />
                        </div>
                        <!-- 大格颜色 gridColorMax -->
                        <div class="h_info">
                            <text class="h_info_lable">大格颜色:</text>
                            <NColorPicker class="h_info_val" v-model:value="myStore.canvasAttr.gridColorMax"
                                :actions="['confirm']" :modes="['rgb']" :swatches="colorOpt" :show-alpha="true" />
                        </div>
                    </div>

                    <!-- 格栅样式选项:2-均分画布 -->
                    <div v-if="gridStyle === 2 /*均分画布*/">
                        <!-- 格栅间距 GridBisectionCont -->
                        <div class="h_info">
                            <text class="h_info_lable">格栅间距:</text>
                            <div class="h_flex_column h_info_val">
                                <NSlider class="h_margin_top_10" :step="1" v-model:value="myStore.canvasAttr.gridSpace" />
                                <NInputNumber class="h_margin_top_10" :step="1"
                                    v-model:value="myStore.canvasAttr.gridSpace" />
                            </div>
                        </div>
                        <!-- 小格颜色 gridColorMini -->
                        <div class="h_info">
                            <text class="h_info_lable">小格颜色:</text>
                            <NColorPicker class="h_info_val" v-model:value="myStore.canvasAttr.gridColorMini"
                                :actions="['confirm']" :modes="['rgb']" :swatches="colorOpt" :show-alpha="true" />
                        </div>
                        <!-- 大格颜色 gridColorMax -->
                        <div class="h_info">
                            <text class="h_info_lable">大格颜色:</text>
                            <NColorPicker class="h_info_val" v-model:value="myStore.canvasAttr.gridColorMax"
                                :actions="['confirm']" :modes="['rgb']" :swatches="colorOpt" :show-alpha="true" />
                        </div>
                    </div>

                    <!-- 格栅样式选项:3-按宽高均分画布 -->
                    <div v-if="gridStyle === 3 /*按宽高均分画布*/">
                        <!-- 宽等分数 gridBisectionWidthCont -->
                        <div class="h_info">
                            <text class="h_info_lable">宽等分数:</text>
                            <div class="h_flex_column h_info_val">
                                <NSlider class="h_margin_top_10" :step="1"
                                    v-model:value="myStore.canvasAttr.gridBisectionWidthCont" />
                                <NInputNumber class="h_margin_top_10" :step="1"
                                    v-model:value="myStore.canvasAttr.gridBisectionWidthCont" />
                            </div>
                        </div>
                        <!-- 高等分数 gridBisectionWidthCont -->
                        <div class="h_info">
                            <text class="h_info_lable">高等分数:</text>
                            <div class="h_flex_column h_info_val">
                                <NSlider class="h_margin_top_10" :step="1"
                                    v-model:value="myStore.canvasAttr.gridBisectionHeightCont" />
                                <NInputNumber class="h_margin_top_10" :step="1"
                                    v-model:value="myStore.canvasAttr.gridBisectionHeightCont" />
                            </div>
                        </div>
                        <!-- 小格颜色 gridColorMini -->
                        <div class="h_info">
                            <text class="h_info_lable">小格颜色:</text>
                            <NColorPicker class="h_info_val" v-model:value="myStore.canvasAttr.gridColorMini"
                                :actions="['confirm']" :modes="['rgb']" :swatches="colorOpt" :show-alpha="true" />
                        </div>
                        <!-- 大格颜色 gridColorMax -->
                        <div class="h_info">
                            <text class="h_info_lable">大格颜色:</text>
                            <NColorPicker class="h_info_val" v-model:value="myStore.canvasAttr.gridColorMax"
                                :actions="['confirm']" :modes="['rgb']" :swatches="colorOpt" :show-alpha="true" />
                        </div>
                    </div>
                </div>
            </div>

            <!---------------------------|光标 -->
            <n-divider />
            <div id="CanvasAttrsCursor" class="anchor_link">
                <!-- 显示光标-->
                <div class="h_info">
                    <text class="h_info_lable">显示光标:</text>
                    <NSwitch class="h_info_val" v-model:value="myStore.canvasAttr.isShowCursor"
                       />
                </div>
                <!-- 光标颜色 -->
                <div class="h_info" v-if="isShowCursor">
                    <text class="h_info_lable">光标颜色:</text>
                    <NColorPicker class="h_info_val" v-model:value="myStore.canvasAttr.cursorColor" :actions="['confirm']"
                        :modes="['rgb']" :swatches="colorOpt" :show-alpha="true" />
                </div>
                <!-- 光标盒尺寸 -->
                <div class="h_info">
                    <text class="h_info_lable">光标盒尺寸:</text>
                    <div class="h_flex_column h_info_val">
                        <NSlider class="h_margin_top_10" :step="1" v-model:value="myStore.canvasAttr.cursorBoxSize" />
                        <NInputNumber class="h_margin_top_10" :step="1" v-model:value="myStore.canvasAttr.cursorBoxSize" />
                    </div>
                </div>
                <!-- 光标线宽度 -->
                <div class="h_info" v-if="isShowCursor">
                    <text class="h_info_lable">光标线宽度:</text>
                    <div class="h_flex_column h_info_val">
                        <NSlider class="h_margin_top_10" :step="0.01" v-model:value="myStore.canvasAttr.cursorLineWidth" />
                        <NInputNumber class="h_margin_top_10" :step="0.01"
                            v-model:value="myStore.canvasAttr.cursorLineWidth" />
                    </div>
                </div>
                <!-- 光标长度 -->
                <div class="h_info" v-if="isShowCursor">
                    <text class="h_info_lable">光标长度:</text>
                    <div class="h_flex_column h_info_val">
                        <NSlider class="h_margin_top_10" :min="0" :max="sliderMax"
                            v-model:value="myStore.canvasAttr.cursorLang" />
                        <NInputNumber class="h_margin_top_10" :min="0" :max="sliderMax" :step="sliderStep"
                            v-model:value="myStore.canvasAttr.cursorLang" />
                    </div>
                </div>
            </div>

            <!---------------------------|捕捉 -->
            <n-divider />
            <div id="CanvasAttrsCatch" class="anchor_link">
                <!-- 捕捉[0]捕捉 isCatch-->
                <div class="h_info">
                    <text class="h_info_lable">格栅捕捉:</text>
                    <NSwitch class="h_info_val" v-model:value="myStore.canvasAttr.isCatch" />
                </div>
                <!-- 捕捉[1]捕捉距离 catchRange-->
                <div class="h_info" v-if="isCatch && gridModel === 1 /*无格栅*/">
                    <text class="h_info_lable">捕捉距离:</text>
                    <div class="h_flex_column h_info_val">
                        <NSlider class="h_margin_top_10" :step="1" v-model:value="myStore.canvasAttr.catchRange" />
                        <NInputNumber class="h_margin_top_10" :step="1" v-model:value="myStore.canvasAttr.catchRange" />
                    </div>
                </div>


            </div>
        </div>

        <div class="down_canvas_right">
            <text style="height: 16px;width: 100%;text-align: center;color: #fff;">缩略图</text>
            <canvas></canvas>
        </div>
    </div>
</template>

<script setup lang="ts">
/* ================================================================================================ */
// 🍀引入
/* ================================================================================================ */

/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
// 🐸 引入存储
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
import { storeToRefs } from "pinia";
import { useEditorStore } from "@/store"; // 画布


/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
// 🐸 使用存储
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
const myStore = useEditorStore(); // 画布
/* ================================================================================================ */
//                                 ★变量
/* ================================================================================================ */
/** 最小值 */
let sliderMin = computed(() => myStore.sliderMin);
/** 最大值 */
let sliderMax = computed(() => myStore.sliderMax);
/** 步距值 */
let sliderStep = computed(() => myStore.sliderStep);

/** 格栅模式 */
let gridModel = computed(() => myStore.canvasAttr.gridModel);
/** 格栅样式 */
let gridStyle = computed(() => myStore.canvasAttr.gridStyle);
/** 显示光标 */
let isShowCursor = computed(() => myStore.canvasAttr.isShowCursor);
/** 捕捉 */
let isCatch = computed(() => myStore.canvasAttr.isCatch);
/** 图标尺寸 */
const IconSize = 36;
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
// 🐸 从静态存储 引入 选项
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/** 页面尺寸选项 */
const pageSizeOpt = myStore.staticData.pageSizeOpt;
/** 颜色选项卡 */
const colorOpt = myStore.staticData.colorOpt;
/** 格栅模式选项 */
const gridModelOpt = myStore.staticData.gridModelOpt;
/** 格栅样式选项 */
const gridStyleOpt = myStore.staticData.gridStyleOpt;

</script>

<style lang="scss" scoped>
// 导航树
.down_canvas {
    width: 100%;
    max-height: 250px;
    display: flex;
    flex-direction: row;
    justify-content: start;
    background-color: rgb(80, 80, 80);
    overflow: hidden;
    user-select: none;

    //下部左
    .down_canvas_left {
        max-height: 250px;
        width: 150px;
        margin-left: 10px;
        overflow-x: hidden;
        overflow-y: scroll;
        /* firefox */
        scrollbar-color: rgba(144, 146, 152, 0.3) transparent;
        scrollbar-width: auto;

        /* chrome */
        &::-webkit-scrollbar,
        &::-webkit-scrollbar-track-piece {
            background-color: transparent;
        }

        &::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

        &::-webkit-scrollbar-thumb {
            border-radius: 5px;
            background-color: rgb(197, 197, 197);
        }
    }

    //下部中
    .down_canvas_middle {
        max-height: 250px;
        width: 100%;
        overflow-x: hidden;
        overflow-y: scroll;
        /* firefox */
        scrollbar-color: rgba(144, 146, 152, 0.3) transparent;
        scrollbar-width: auto;

        /* chrome */
        &::-webkit-scrollbar,
        &::-webkit-scrollbar-track-piece {
            background-color: transparent;
        }

        &::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

        &::-webkit-scrollbar-thumb {
            border-radius: 5px;
            background-color: rgb(197, 197, 197);
        }
    }

    .down_canvas_right {
        max-height: 250px;
        width: 600px;
        border: 1px solid rgb(197, 197, 197);
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
    }
}

// 锚点链接
.anchor_link {
    margin: 0px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
}

//工具
.container_tool {
    margin: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

// 参数
.h_info {
    padding: 5px;
    width: 100%;
    user-select: none;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}

// 参数标题
.h_info_lable {
    padding-left: 3px;
    width: 150px;
}

// 参数变量
.h_info_val {
    width: 100%;
    margin-right: 16px;
}
</style>
